<template>
  <div class="circle-progress" :style="{ width: diameter + 'px', height: diameter + 'px' }">
    <svg :viewBox="`0 0 36 36`">
      <path
        class="circle-bg"
        :stroke="circleBgColor"
        :stroke-width="normalizedCircleWidth"
        d="M18 2.0845
           a 15.9155 15.9155 0 0 1 0 31.831
           a 15.9155 15.9155 0 0 1 0 -31.831"
      />
      <path
        class="circle"
        :style="circleStyle"
        :stroke="circleColor"
        :stroke-width="normalizedCircleWidth"
        d="M18 2.0845
           a 15.9155 15.9155 0 0 1 0 31.831
           a 15.9155 15.9155 0 0 1 0 -31.831"
      />
      <text x="18" y="20.35" class="percentage">{{ percentage }}%</text>
    </svg>
    <div class="circle-content">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: Number,
      required: true
    },
    circleColor: {
      type: String,
      default: '#4db8ff'
    },
    circleBgColor: {
      type: String,
      default: '#eee'
    },
    diameter: {
      type: Number,
      default: 100
    },
    circleWidth: {
      type: Number,
      default: 4
    }
  },
  data() {
    return {
      animatedValue: 0
    };
  },
  computed: {
    percentage() {
      return (this.animatedValue * 100).toFixed(1);
    },
    normalizedCircleWidth() {
      return this.circleWidth / (this.diameter / 36);
    },
    circleStyle() {
      const offset = 100 - this.animatedValue * 100;
      return {
        strokeDasharray: '100, 100',
        strokeDashoffset: offset,
        strokeLinecap: 'round',
        // filter: `drop-shadow(0 0 5px ${this.circleColor})`,
        transition: 'stroke-dashoffset 1s ease'
      };
    }
  },
  watch: {
    value: {
      immediate: true,
      handler(newVal) {
        this.animateProgress(newVal);
      }
    }
  },
  mounted() {
    this.animateProgress(this.value);
  },
  methods: {
    animateProgress(value) {
      this.animatedValue = 0;
      this.$nextTick(() => {
        setTimeout(() => {
          this.animatedValue = value;
        }, 100); // Small delay to trigger the animation
      });
    }
  }
};
</script>

<style scoped>
.circle-progress {
  position: relative;
  margin: 0px auto;
}
svg {
  width: 100%;
  height: 100%;
}
.circle-bg {
  fill: none;
}
.circle {
  fill: none;
  transform: rotate(0deg); /* Start the progress from the top center */
  transform-origin: 50% 50%;
}
.percentage {
  fill: #666;
  font-family: Arial, sans-serif;
  font-size: 0.5em;
  text-anchor: middle;
  dominant-baseline: central;
}
.circle-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
